Gatsby提供了一個叫做 GraphiQL 的工具，幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個可視化界面，讓我們可以直觀地看到查詢的結果，最後還能透過其Prettify功能對查詢進行美化，以便用於Gatsby當中。今天，我們就來了解一下這個GraphiQL工具。

YouTube Video:

GraphiQL

當你執行gatsby develop之後，除了本地網站的連結之外，Gatsby還為你提供了GraphiQL的連結：

http://localhost:8000/___graphql

點擊後便能在瀏覽器上看到GraphiQL的界面，左側為查詢輸入區，右側查詢結果。輸入完查詢後，點擊左上角的執行按鈕便能看到查詢結果。

請嘗試輸入：

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
          path
        }
      }
    }
  }
}

這跟我們之前在templates/index.js當中使用的基本一樣。我們要找全部的Markdown文件，在edges當中的每一個node便是一份Markdown文件，裡面還有frontmatter和html（上面沒用到），frontmatter底下還有title和path。

按下執行後，你會看到我們的兩篇Markdown的內容。

接著，再將allMarkdownRemark那行改為：

allMarkdownRemark(limit: 1) {

其他保持不變，執行後，便會看到只有一篇文章的資料，這便是受到limit: 1的限制。

以後需要用到GraphQL的時候，就可以先在GraphiQL中測試一下，沒有問題後，按下左上方的Prettify，就能把查詢復制到Gatsby當中。

同步發表於：NodeJust